<template>
  <div class="ratingselect">
    <div class="btn">
      <el-button @click="select(2,$event)" :class="{'active':selectType===2}" class="posttive" type="primary" size="small">{{desc.all}} <span>{{ratings.length}}</span></el-button>
      <el-button @click="select(0,$event)" :class="{'active':selectType===0}" class="posttive" type="primary" size="small">{{desc.positive}} <span>{{posttive.length}}</span></el-button>
      <el-button @click="select(1,$event)" :class="{'active':selectType===1}" class="posttive" type="warning" size="small">{{desc.negative}} <span>2</span></el-button>

    </div>
    <div @click="toggleContent" class="switch" :class="{'on':onlyContent}">
      <span class="icon-check_circle"></span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>

<script>
  const POSTTIVE = 0;
  const NEGATIVE = 1;
  const ALL = 2;

  export default{
    data() {
      return {
        value2: true
      }
    },

    props: {
      ratings: {
        type: Array,
        default(){
          return [];
        }
      },
      selectType: {
        type: Number,
        default: ALL
      },
      onlyContent: {
        type: Boolean,
        default: false
      },
      desc: {
        type: Object,
        default() {
          return {
            all: '全部',
            positive: '满意',
            negative: '不满意'
          };
        }
      }

    },
    created(){
//      console.log(this.ratings);
    },
    methods:{
      select(type,event){
        if(!event._constructed){
          return
        }
        this.$emit('select',type)

      },
      toggleContent(event){
        if(!event._constructed){
          return
        }
        this.$emit('toggle')
      }
    },
    computed:{
      posttive(){
          return this.ratings.filter((rating)=>{
              return rating.rateType ===POSTTIVE
          })
      },
      negative(){
          return this.ratings.filter((rating)=>{
              return rating.rateType===NEGATIVE
          })
      }
    }
  }
</script>

<style lang="scss">
.ratingselect{
  .btn{
  padding-bottom:18px;
  border-bottom:1px solid rgba(7,17,27,.1);

  .posttive{
    &.active{
       background-color: #FF4949;
        border-color: #FF4949;
     }
  }
  }
  .switch{
    margin-top: 12px;
    font-size:0;
    padding-bottom: 12px;
    border-bottom:1px solid rgba(7,17,27,.1);
    &.on{
    .icon-check_circle{
      color: #00c850
    }
  }
  .icon-check_circle{
    display: inline-block;
    vertical-align: middle;
    font-size: 24px;
    color: rgb(147,153,159);
    line-height: 24px;
    margin-right: 4px;

  }
  .text{
    display: inline-block;
    vertical-align: middle;

    font-size: 12px;
    color: rgb(147,153,159);
    line-height: 12px;

  }
}
}

</style>
